<template>
  <div class="u-container">
    <div class="c-tab clearfix">
      <div class="tool-left l">
        <a href="javascript:void(0)" class="sort-item " v-bind:class="{'active' :'' == courseType}" @click="clickTab('')">全部</a>
        <a href="javascript:void(0)" class="sort-item " v-bind:class="{'active' :'1' == courseType}" @click="clickTab('1')">点播</a>
        <a href="javascript:void(0)" class="sort-item " v-bind:class="{'active' :'2' == courseType}" @click="clickTab('2')">直播</a>
        <a href="javascript:void(0)" class="sort-item " v-bind:class="{'active' :'3' == courseType}" @click="clickTab('3')">班级</a>
        <a href="javascript:void(0)" class="sort-item " v-bind:class="{'active' :'5' == courseType}" @click="clickTab('5')">面授</a>
        <a href="javascript:void(0)" class="sort-item " v-bind:class="{'active' :'4' == courseType}" @click="clickTab('4')">试题</a>
      </div>
    </div>
    <div class="all-course-main" v-if="courseType != '4'">
      <div class="allcourse-content" v-if="courseFavoriteList.length >0">
        <div class="courseitem"  v-for="courseFavorite in courseFavoriteList" :key="courseFavorite.id">
          <div class="img-box">
            <router-link v-if="courseFavorite.sellType!='4'" :to="{path:'/course/courseInfo/'+courseFavorite.courseId}" target="_blank">
              <img width="200" height="116" v-lazy="courseFavorite.logo">
            </router-link>
            <router-link v-if="courseFavorite.sellType=='4'" :to="{path:'/lineDownCourse/lineInfo/'+courseFavorite.courseId}" target="_blank">
              <img width="200" height="116" v-lazy="courseFavorite.logo">
            </router-link>
          </div>
          <div class="info-box">
            <div class="title">
              <p v-if="courseFavorite.sellType=='1'" class="hd">【点播】</p>
              <p v-if="courseFavorite.sellType=='2'" class="hd">【直播】</p>
              <p v-if="courseFavorite.sellType=='3'" class="hd">【班级】</p>
              <router-link v-if="courseFavorite.sellType!='4'" :to="{path:'/course/courseInfo/'+courseFavorite.courseId}" target="_blank" class="hd">
                {{courseFavorite.courseName}}
              </router-link>
              <router-link v-if="courseFavorite.sellType=='4'" :to="{path:'/lineDownCourse/lineInfo/'+courseFavorite.courseId}" target="_blank" class="hd">
                {{courseFavorite.courseName}}
              </router-link>
            </div>
            <div class="study-info">
              <p class="follow-desc" v-html="courseFavorite.title">
              </p>
            </div>
            <div class="op hover-a-blue">
              <a href="javascript:void(0);"  @click="remove(courseFavorite.id)" data-cid="558" data-type="1" title="取消收藏" class="all_follow_f js-cancel-follow ">取消收藏</a>
            </div>
          </div>
        </div>
        <!-- 分页 -->

      </div>
      <page-component :page="page" @goto="goto" v-show="courseFavoriteList.length > 0"></page-component>
      <div class="nodata" v-if="courseFavoriteList.length == 0">
        <p><i class="imv2-error_c"></i></p>
        <p>你还没有收藏课程</p>
      </div>
    </div>
    <!--  试题收藏 -->
    <div class="all-course-main"  v-if="courseType == '4'">
      <div class="allcourse-content js-course-list " v-show="detailList.length >0">
        <div class="system_wrap">
          <div class="system_list">

            <div class="cl_new_box"  v-for="(fav,index) in detailList" :key="index">
              <div class="cl_n_l float_left"><p class="cl_n_ops">【{{getQuesType(fav.qstType)}}】</p>
                <p class="cl_n_title" v-html="fav.qstContent"></p>
              </div>
              <div class="cl_n_r float_right">
                <p class="cl_n_remove">
<!--                  <span><img src="" class="remove_img">移除</span>-->
                </p>
                <div class="rc_btn_comm1 cl_n1"  @click="removeFavoriteqst(fav.id)">移除</div>
                <router-link class="pic-a-n" :to="{path:'/exam/examFavQuestion',query:{current:index+1}}" target="_blank">
                <div class="rc_btn_comm1 cl_n2">查看解析</div>
                </router-link>
              </div>
              <div style="clear: both"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <page-component :page="page" @goto="goto" v-show="detailList.length >0"></page-component>
      <div class="nodata" v-if="detailList.length == 0">
        <p><i class="imv2-error_c"></i></p>
        <p>还没有数据</p>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from "vuex";
  import {getCourseFavoriteList,removeCoursefavorites} from "@/api/user";
  import {getFavoritesqst,removeFavoritesqst} from "@/api/exam";
  import pageComponent from '@/views/common/pageComponent'
  export default {
    name: 'courseFavorites',
    data() {
      return {
        courseType: '',
        isReg: false,
        courseFavoriteList:[],
        page:{},
        current:1,
        size:20,
        detailList: [],
      }
    },
    methods: {
      goto(i){
        this.queryCourseFavoriteList(i);
      },
      remove(id){
        this.$layer.confirm(
          "确定要删除吗？",
          {
            title: "删除收藏",
            btn: ["确定", "取消"]
          },
          layerid => {
            // this.$layer.msg("执行了删除");
            removeCoursefavorites(id).then(res =>{
              this.queryCourseFavoriteList(1);
            })
            this.$layer.close(layerid);
          },
          layerid => {
            this.$layer.close(layerid);
          }
        )
      },
      clickTab(i){
        this.courseType = i
        if(this.courseType != '4'){
          this.queryCourseFavoriteList(1);
        }else{
          this.getList(1);
        }

      },
      getList(current) {
        if (typeof (this.studentInfo.id) == "undefined") {
          return;
        }
        this.current = current;
        let params = {
          current: this.current,
          size: this.size,
        }
        getFavoritesqst(params).then(res => {
          this.detailList = res.data.data.records
          this.page = res.data.data
        })
      },
      removeFavoriteqst(id) {
        this.$layer.confirm(
          "确定要删除吗？",
          {
            title: "删除收藏",
            btn: ["确定", "取消"]
          },
          layerid => {
            // this.$layer.msg("执行了删除");
            removeFavoritesqst({ids:id}).then(res => {
              this.current = 1
              this.getList(1);
            })
            this.$layer.close(layerid);
          },
          layerid => {
            this.$layer.close(layerid);
          }
        )
      },
      queryCourseFavoriteList(current){
        if (typeof(this.studentInfo.id) == "undefined"){
          return;
        }
        this.current = current;
        let selectCourseType = this.courseType;
        if(this.courseType == '5'){
          selectCourseType=4;
        }
        let params = {
          type:selectCourseType,
          current:this.current,
          size:this.size,
        }
        let that = this
        getCourseFavoriteList(params).then(res =>{
          that.page = res.data.data
          this.courseFavoriteList = res.data.data.records
        })
      },
      getQuesType(i){
        switch (i){
          case 1:
            return "单选题";
          case 2:
            return "多选题";
          case 3:
            return "判断题";
          case 4:
            return "填空题";
        }
      },
    },
    mounted:function() {
      this.queryCourseFavoriteList(1);
      let courseType = this.$route.query.courseType;
      if (typeof(courseType) != "undefined"){
        this.clickTab(courseType);
      }
    },
    computed: {
      ...mapGetters(["studentInfo"]),
    },
    components: {
      pageComponent
    },
    watch: {
      studentInfo: function (val, oldVal) {
        this.queryCourseFavoriteList(1);
      }
    },
  }
</script>

<style scoped>
  .system_wrap {
    min-height: 500px;
  }
  .system_list {
    min-height: 150px;
    padding-top: 10px;
  }
  .float_left {
    float: left;
  }
  .float_right {
    float: right;
  }
  .cl_new_box {
    margin-top: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
  }
  .cl_n_l {
    width: 75%;
    margin-left: 31px;
    border-right: 1px solid #e6e6e6;
    min-height: 225px;
  }
  .cl_n_ops {
    color: #0091ff;
    margin: 25px 0 0;
    font-size: 16px;
  }
  .cl_n_title {
    margin-top: 33px;
    color: #000;
    font-size: 16px;
  }
  .cl_n_cord {
    color: #999;
    font-size: 14px;
    margin-top: 90px;
  }
  .rc_cord_bg {
    color: #0091ff;
  }
  .cl_n_r {
    width: 181px;
    height: 100%;

  }
  .cl_n_remove {
    text-align: center;
    color: #666;
    font-size: 14px;
    margin-top: 54px;
    cursor: pointer;
  }
  .remove_img {
    margin-right: 6px;
    width: 13px;
    height: 13px;
    margin-top: -2px;
  }
  .cl_n1, .cl_n2 {
    margin: 19px auto 0;
  }
  .rc_btn_comm1 {
    width: 96px;
    height: 32px;
    background: #f5f5f5;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    text-align: center;
    line-height: 32px;
    color: #333;
    font-size: 14px;
    cursor: pointer;
  }
  .rc_btn_comm1:hover {
    background-color: #0091ff;
    color: #fff;
  }
</style>
